<template>
  <div>
    <input type="file" @change="onFileSelected" />
    <button v-if="file && !isUploading" @click="startUpload">开始上传</button>
    <button v-if="isUploading" @click="pauseUpload">暂停上传</button>
    <button v-if="isUploading" @click="resumeUpload">继续上传</button>
    <p>已上传分片: {{ uploadedChunks }} / {{ totalChunks }}</p>
    <progress :value="uploadedChunks" :max="totalChunks"></progress>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const file = ref(null);
const isUploading = ref(false);
const uploadedChunks = ref(0);
const totalChunks = ref(0);

const chunkSize = 10 * 1024 * 1024; // 分片大小：10MB
let worker = null;
let uploadQueue = [];
let currentChunkIndex = 0;

function onFileSelected(event) {
  file.value = event.target.files[0];
  if (file.value) {
    totalChunks.value = Math.ceil(file.value.size / chunkSize);
  }
}

async function startUpload() {
  isUploading.value = true;
  worker = new Worker('file-slicer-worker.js');
  worker.postMessage({ file: file.value, chunkSize });
  worker.onmessage = ({ data }) => {
    if (data.type === 'slice') {
      uploadQueue.push(data.chunk);
      uploadNextChunk();
    }
  };
}

function pauseUpload() {
  isUploading.value = false;
}

function resumeUpload() {
  isUploading.value = true;
  uploadNextChunk();
}

async function uploadNextChunk() {
  if (!isUploading.value || currentChunkIndex >= totalChunks.value) return;

  const chunk = uploadQueue.shift();
  await uploadChunk(chunk, currentChunkIndex++);
  uploadedChunks.value = currentChunkIndex;
  if (currentChunkIndex < totalChunks.value) {
    uploadNextChunk();
  } else {
    // 全部上传完毕，清理资源
    worker.terminate();
    worker = null;
    uploadQueue = [];
    isUploading.value = false;
    alert('文件上传完成!');
  }
}

async function uploadChunk(chunk, index) {
  const formData = new FormData();
  formData.append('file', new Blob([chunk]), `file_part_${index}`);
  try {
    const response = await fetch('/api/upload-chunk', {
      method: 'POST',
      body: formData,
    });
    if (!response.ok) {
      throw new Error(`Failed to upload chunk ${index}: ${response.status}`);
    }
  } catch (error) {
    console.error('Error uploading chunk:', error);
    // 处理错误，可能需要重新放入队列或提示用户
  }
}

onMounted(() => {
  // 在组件挂载时注册worker相关事件
});

onBeforeUnmount(() => {
  // 在组件卸载时清理worker资源
  if (worker) {
    worker.terminate();
  }
});


</script>
